<ix-manual-selection-disk-filters
  (filtersUpdated)="filtersUpdated.next($event)"
></ix-manual-selection-disk-filters>

<div
  class="dnd-wrapper"
  dndDropzone
  [ngClass]="{'drag-active': (dragToggleStore$.dragActive$ | async)}"
  (dndDrop)="onDrop($event)">
  <div
    class="tree-container"
  >
    <ix-tree-view
      [ixDataSource]="dataSource"
      [ixTreeControl]="treeControl"
    >
      <ix-tree-node
        *treeNodeDef="let disk; dataSource: dataSource"
        treeNodeToggle
        routerLinkActive="selected"
      >
        <div
          class="unused-disk"
          [ngClass]="{ 'grabbed': dragToggleStore$.dragActive$ | async }"
          [dndDraggable]="asDisk(disk)"
          [dndEffectAllowed]="'move'"
          (dndStart)="onDragStart()"
          (dndCanceled)="onDragCanceled()"
          (dndEnd)="onDragEnd()"
        >
          <ix-disk-icon
            class="disk-icon"
            dndDragImageRef
            [name]="asDisk(disk).name"
            [size]="asDisk(disk).size"
            [type]="asDisk(disk).type"
          ></ix-disk-icon>

          <ix-disk-info
            class="disk-info"
            [disk]="asDisk(disk)"
          ></ix-disk-info>
        </div>
      </ix-tree-node>

      <ix-nested-tree-node
        *treeNodeDef="let group; dataSource: dataSource; when: isGroup"
        [treeNodeDefDataSource]="dataSource"
      >
        <div
          treeNodeToggle
          class="group-row"
          [class.group-row-empty]="!group.children.length"
        >
          <ix-icon name="ix-enclosure" [title]="'Enclosure' | translate"></ix-icon>
          <span class="group-name">{{ asEnclosureGroup(group).group }}</span>
          @if (group.children.length) {
            <ix-icon
              [name]="treeControl.isExpanded(group) ? 'expand_more' : 'chevron_right'"
            ></ix-icon>
          }
        </div>

        @if (isExpanded(group)) {
          <ng-container treeNodeOutlet></ng-container>
        }
      </ix-nested-tree-node>
    </ix-tree-view>
    @if (!dataSource.data.length) {
      <div class="empty-tree">
        {{ 'No Unassigned Disks' | translate }}
      </div>
    }
  </div>
</div>

